import React, { Component } from 'react';
import { Modal, Button, message, Table, Input, Checkbox, Icon, InputNumber, Popconfirm } from 'antd';
import equal from 'deep-equal';
import { WeaDialog, WeaRightMenu, WeaTop, WeaInput, WeaSearchGroup, WeaTools, WeaFormItem, WeaUpload, WeaLocaleProvider } from 'ecCom';
import { WeaSwitch } from 'comsMobx';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

const getKey = WeaTools.getKey;
const getLabel = WeaLocaleProvider.getLabel;
@observer
class AddContacterModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }
  render() {
    const { visible } = this.state;
    const { type = 'add' } = this.props;
    return (
      <WeaDialog
        ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1qql4v`}
        style={{ width: 800, height: 400 }}
        visible={visible}
        title={(type == 'add' ? getLabel(82, '新建') : getLabel(93, '编辑')) + getLabel(572, '联系人')}
        icon="icon-coms-crm"
        iconBgcolor="#96358a"
        buttons={[
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rdmi3u@save`} type="primary" onClick={this.doSave} >{getLabel(86, '保存')}</Button>,
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6mhc3c@close`} onClick={() => this.setVisible(false)}>{getLabel(309, '关闭')}</Button>,
        ]}
        onCancel={() => this.setVisible(false)}
      >
        <div style={{ width: '100%', height: '400px', overflow: 'auto' }}>
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@cfl66n`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
            { this.getAddForm()}
          </WeaRightMenu>
        </div>

      </WeaDialog>
    );
  }

    setVisible = (visible) => {
      this.setState({ visible });
    }

    onRightMenuClick(key) {
    	if (key == '1') {
        this.doSave();
    	}
    }
    getRightMenu() {
    	const btns = [];
    	btns.push({
    		icon: <i className="icon-coms-Preservation" />,
        content: getLabel(86, '保存'),
        key: 1,
      });
    	return btns;
    }
    getAddForm=() => {
      const { contentStore } = this.props;
      const { addContacterCondition, addContacterform } = contentStore;
      const { isFormInit } = addContacterform;
      const group = [];
      isFormInit && toJS(addContacterCondition).map((c,indexGroup) => {
        const items = [];
        c.items.map((fields, index) => {
          let dom;
          if (fields.conditionType == 'UPLOAD') {
            const key = getKey(fields);
            const bindObj = addContacterform.$(key);
            dom = (<div className="crm-weaupload"><WeaUpload
              ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@kv9s9u@${index}`}
              {...bindObj.bind()}
              {...fields}
              {...fields.otherParams}
              uploadId={fields.domkey[0]}
              uploadUrl="/api/crm/common/fileUpload"
              category="0,0,0"
              autoUpload
              showBatchLoad={false}
              showClearAll={false}
              multiSelection
              listType={fields.listType}
              onChange={(ids, lists) => {
                addContacterform.updateFields({ [fields.domkey[0]]: { value: `${ids}` } }, false);
              }}
              datas={fields.datas || []}
            /></div>);
          } else {
            dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@hejpzw@${index}`} fieldConfig={fields} form={addContacterform} />;
          }
          items.push({
            com: (<WeaFormItem
              ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4si2b0@${index}`}
              label={`${fields.label}`}
              labelCol={{ span: `${fields.labelcol}` }}
              error={addContacterform.getError(fields)}
              tipPosition={'bottom'}
              wrapperCol={{ span: `${fields.fieldcol}` }}
            >
              {dom}
            </WeaFormItem>),
            colSpan: 1,
          });
        });
        group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ybe2ph@${indexGroup}`} needTigger col={2} title={c.title} showGroup items={items} />);
      });
      return group;
    }
    doSave=() => {
      const { contentStore, customerId } = this.props;
      const { addContacterform } = contentStore;
      const formParams = addContacterform.getFormParams();
      const newParams = { customerId, main: 0, ...formParams };
      addContacterform.validateForm().then((f) => {
        if (f.isValid) {
          this.setState({ visible: false });
          { typeof this.props.onSave === 'function' && this.props.onSave(newParams); }
        } else {
          f.showErrors();
               	// Modal.warning({
          //     title: getLabel(15172,"系统提示"),
          //     content: getLabel(15859,"必要信息不完整，红色标记为必填项！"),
          //     okText:getLabel(33703,"确定")
          // });
        }
      });
    }
}

export default AddContacterModal;
